<template>
  <div class="home-view">
    <CinemaSeating
      class="home-view-seat"
      ref="cinema"
      :rows="seatRows"
      :cinemaNum="cinemaNum"
    />
    <div class="button" @click="getSeats">Continue</div>
  </div>
</template>

<script>
import CinemaSeating from "./components/CinemaSeating.vue";
import { toRaw } from "@vue/reactivity";

export default {
  components: {
    CinemaSeating,
  },
  data() {
    return {
      cinemaNum: 1, // 放映厅编号
      seatRows: [],
    };
  },
  created() {
    const { cinemaNum = 1, rows = [] } = this.fetchData(4, 1, "ABCDEFGHIJK"); // 模拟从后台获取数据
    this.seatRows = rows;
    this.cinemaNum = cinemaNum;
  },
  methods: {
    getSeats() {
      // 获取座位信息
      const { seats = [], cinemaNum = 0 } = this.$refs.cinema.getSeats();
      console.log("seats", toRaw(seats));
      console.log("cinemaNum", cinemaNum);
      // 返回的数据格式为：{
      //   seats：选的座位数组,
      //   cinemaNum: 放映厅编号
      // }

      // this.mockSocket();
    },
    mockSocket() {
      // 模拟websocket
      this.timer = setTimeout(() => {
        const { cinemaNum = 1, rows = [] } = this.fetchData(4, 1, "ABCDEF"); // 模拟从后台获取数据
        this.seatRows = rows;
        this.cinemaNum = cinemaNum;
      }, 3000);
    },
    fetchData(numColumns, aisleIndex, rowLabels) {
      // 模拟从后台获取数据
      const { cinemaNum = 1, rows = [] } = this.generateSeats(
        numColumns,
        aisleIndex,
        rowLabels
      );
      return {
        rows,
        cinemaNum,
      };
    },
    generateSeats(numColumns, aisleIndex, rowLabels) {
      // 每行的实际座位数 numColumns = 4; 过道的索引位置（从0开始）aisleIndex = 1; rowLabels 设置有多少行
      // 生成每个放映厅的座位数量
      const rows = [];
      const cinemaNum =
        Math.floor(Math.random() * (Math.floor(Math.abs(10)) - 0 + 1)) + 0; // 随机生成放映厅编号，默认放映厅最大为10

      rowLabels.split("").forEach((rowLabel) => {
        const row = [];
        for (let i = 1; i <= numColumns; i++) {
          const seat = {
            label: `${rowLabel}${i}`,
            type: "seat",
            status: this.randomSeatStatus(), // 随机状态
            userSelected: false, // 默认用户没有选择
          };
          row.push(seat);

          // 在第二列和第三列之间插入过道
          if (i === aisleIndex + 1) {
            row.push({ type: "aisle" });
          }
        }
        rows.push(row);
      });

      return { rows, cinemaNum };
    },
    randomSeatStatus() {
      // 随机生成座位状态为别人选择、别人购买或未操作
      const statuses = ["selected", "purchased", "available"];
      return statuses[Math.floor(Math.random() * statuses.length)];
    },
  },
};
</script>

<style scoped>
.home-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100vh;
  background-color: #000;
}
.button {
  width: 90%;
  margin: 10px auto;
  background-color: #f44336;
  color: #fff;
  text-align: center;
  line-height: 15px;
  border-radius: 4px;
  font-size: 8px;
  cursor: pointer;
}
</style>
